<template>
  <div class="main">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="故障信息" name="FaultInformation" />
      <el-tab-pane label="生产数据" name="ProductionData" />
    </el-tabs>
    <component :is="activeName" />
  </div>
</template>

<script>
import FaultInformation from './components/FaultInformation.vue'
import ProductionData from './components/ProductionData.vue'
export default {
  name: 'Query',
  components: {
    FaultInformation,
    ProductionData
  },
  data() {
    return {
      activeName: 'FaultInformation'
    }
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
$blue: #409EFF;
.main {
  padding: 20px;
  padding-bottom: 50px;
}
.el-tabs {
  ::v-deep {
    .el-tabs__item {
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      border-color: #C0C4CC;
      // &.is-active {
      //   color: #fff;
      //   background-color: $blue;
      //   background-clip: padding-box;
      // }
    }
    .el-tabs__header {
      border-color: #C0C4CC;
    }
    .el-tabs__nav {
      border-color: #C0C4CC;
    }
  }
}
</style>
